<template>
  <div>
        <span v-if="config.type === 'text'">
            {{model[config.name]}}
          <mu-button v-if="config.copy" color="primary" icon small v-clipboard="model[config.name]">
                                            <mu-icon size="12" value="content_copy"></mu-icon>
                                        </mu-button>
        </span>
    <span v-else-if="config.type === 'pic'">
            <img @click="openUrl($http.root() + model[config.name].url)" style="max-height: 64px;" v-if="model[config.name] !== null" :src="$http.root() + model[config.name].url" alt="">
        </span>
    <div class="pos-r" v-else-if="config.type === 'bool'">
      <mu-switch :inputValue="model[config.name]"></mu-switch>
      <div class="pos-a t0 b0 l0 r0"></div>
    </div>
    <div class="pos-r" v-else-if="config.type === 'switch'">
      <mu-switch :inputValue="model[config.name]"></mu-switch>
      <div class="pos-a t0 b0 l0 r0"></div>
    </div>
    <span v-else-if="config.type === 'date'">
            {{$utils.str2date(model[config.name])}}
        </span>
    <span v-else-if="config.type === 'blank'">
        </span>
    <span v-else-if="config.type === 'color'">
            <span style="width: 24px;height: 24px;display: inline-block" :style="{background:model[config.name]}">&nbsp;</span>
        </span>
    <span v-else-if="config.type === 'datetime'">
            {{$utils.getDateTime(model[config.name])}}
        </span>
    <span v-else-if="config.type === 'object'">
            <span v-if="model[config.name] !== null">{{model[config.name][config.objectKey]}}</span>
        </span>
    <span v-else-if="config.type === 'files'">
            <mu-tooltip placement="left" :content="`${file.name}(${file.size})`" v-for="(file,index) in model[config.name]" :key="index">
            <mu-chip class="mar2" flat @click="openUrl($http.root() + file.url)">
                <mu-icon value="attachment"></mu-icon>
                    <span style="max-width: 150px;" class="ofe">
                        {{file.name}}({{file.size}})
                    </span>
            </mu-chip>
            </mu-tooltip>
        </span>
    <span v-else-if="config.type === 'status'">
            <span v-if="model[config.name] !== null" class="padlr5 padtb3 round3" :style="{backgroundColor:model[config.name].background,color:model[config.name].color,}">
                {{model[config.name].name}}
            </span>
        </span>
    <span v-else>
           {{model[config.name]}}
        </span>
  </div>
</template>

<script>
export default {
  name: "EzViewer",
  props: {
    config: {},
    model: {},
  },
  methods: {
    openUrl(url) {
      window.open(url, '_blank')
    }
  }

}
</script>

<style scoped>

</style>